<template>
  <div class="dragBox">
    <div class="dragBox1">
    </div>
    <div class="dragLine" @mousedown="move"></div>
    <div class="dragBox2"></div>
  </div>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
export default {
  name: 'dragBox',
  data: function() {
    return {
      width: 0,
      height: 0,
      x: 0,
      y: 0
    }
  },
  components: {
  },
  methods: {
    move(e) {
      console.log(e);
      let odiv = e.target //获取目标元素
      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft
      let disY = e.clientY - odiv.offsetTop
      document.onmousemove = e => {
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX
        let top = e.clientY - disY

        //绑定元素位置到positionX和positionY上面
        this.positionX = top
        this.positionY = left

        //移动当前元素
        odiv.style.left = left + 'px'
        odiv.style.top = top + 'px'
      }
      document.onmouseup = e => {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
}
</script>

<style>
.dragBox {
  height: 300px;
  display: flex;
  flex-direction: column;
}
.dragBox1 {
  height: 100px;
  border: 1px solid silver;
}
.dragLine {
  height: 3px;
  cursor: n-resize;
  background-color: darkgrey;
}
.dragBox2 {
  height: 100%;
  border: 1px solid skyblue;
}
</style>
